.fs-outlet{
  width: 100vw; height: 100vh; display: flex; flex-flow: column;
  position: relative;
  overflow: hidden;
  background: var(--background);
  .fs-header {
    background: var(--light-background);
    border-bottom: solid 1px var(--border-color);
    min-height: 41px;
  }
  .fs-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-width-half);
    .item{
      width: 120px;
      position: relative;
      float: left;
      margin: var(--space-width-half);
      padding: var(--space-width);
      border: solid 1px transparent;
      transition: .3s;
      border-radius: var(--radius-width);
      background: var(--light-background);
      overflow: hidden;
      .checker{
        position: absolute;
        z-index: 2;
        right: var(--space-width);
        bottom: var(--space-width);
        height: 20px;
        padding-left: 5px;
        background: var(--light-background);
        display: flex;
        flex-flow: column;
        justify-content: center;
        .ant-checkbox-wrapper{height: 16px;}
        .ant-checkbox{top: 0;}
      }
      .preview{
        padding-top: 100%;
        position: relative;
        overflow: hidden;
        background: var(--background);
        //border: solid 1px var(--border-color);
        transition: .3s;
        cursor: pointer;
        .warp{
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          display: flex;
          flex-flow: column;
          justify-content: center;
          img{display: block;margin: 0 auto;max-width: 100%;}
        }
      }
      .name{
        margin-top: var(--space-width);
        height: 20px;
        line-height: 20px;
        overflow: hidden;
        white-space: normal;
        text-overflow: ellipsis;
        word-break:break-all;
        display:-webkit-box!important;
        -webkit-line-clamp: 1;
        -webkit-box-orient:vertical;
        cursor: pointer;
      }
      .options{
        display: flex;
        flex-flow: row;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        padding: var(--space-width);
        background: rgba(0,0,0,.1);
        transform: translateY(-100%);
        transition: .3s;
        z-index: 2;
        .option{
          flex: 1;
        }
      }
      &:hover{
        border-color: var(--border-color);
        box-shadow: 0 0 5px rgba(0,0,0,.2);
        .preview{
          border-color: transparent;
        }
        .options{
          transform: translateY(0);
        }
      }
      &:active, &.checked{
        border-color: var(--color-primary);
      }
    }
    //列表模式
    &.list{
      padding: 0;
      .item{
        float: unset;width: 100%;
        margin: 0;
        display: flex;
        flex-flow: row;
        border: none;
        border-bottom: solid 1px var(--border-color-light);
        border-radius: 0;
        &:last-child{
          border-bottom: none;
        }
        .checker{
          position: unset;
          height: unset;
          padding: 0 var(--space-width) 0 0;
          .ant-checkbox-wrapper{margin: 0 auto;}
          background: transparent;
        }
        .preview{
          width: 40px;
          padding: 0;
          height: 40px;
          border: solid 1px var(--border-color);
        }
        .name{
          flex: 1;
          height: auto;
          display: flex!important;
          flex-flow: column;
          justify-content: center;
          padding: 0 var(--space-width);
          margin: 0;
        }
        .options{
          position: relative;
          transform: unset;
          left: auto;
          right: auto;
          width: auto;
          padding: 8px 0 0 0;
          background: none;
          .option{margin-left: var(--space-width);}
        }
        &:hover{
          background: var(--hover-background);
          box-shadow: none;
        }
      }
    }
  }
  .fs-empty {
    flex: 1;
    display: flex;
    flex-flow: column;
    justify-content: center;
  }
  .fs-queue{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--light-background);
    max-height: calc(100% - 200px);
    z-index: 2;
    border-top: solid 1px var(--border-color);
    transform: translateY(100%);
    opacity: 0;
    transition: 300ms;
    overflow: hidden;
    display: flex;
    flex-flow: column;
    &.open{
      transform: translateY(0);
      opacity: 1;
    }
    .fs-queue-header{
      display: flex;
      flex-flow: row;
      padding: var(--space-width);
      .center{flex:1;}
    }
    .fs-queue-list{
      flex: 1;
      background: var(--background);
      overflow: auto;
      padding: var(--space-width-half);
      .item{
        margin: var(--space-width-half);
        float: left;
        width: calc(25% - var(--space-width));
        padding: var(--space-width);
        display: flex;
        flex-flow: row;
        background: var(--light-background);
        border-radius: var(--radius-width);
        overflow: hidden;
        border: solid 1px transparent;
        transition: 300ms;
        .preview{
          width: 40px;
          height: 40px;
          overflow: hidden;
          display: flex;
          flex-flow: column;
          justify-content: center;
          border: solid 1px var(--border-color);
          img{display: block; max-width: 100%; margin: 0 auto;}
        }
        .detail{
          flex: 1;
          padding-left: var(--space-width);
          .name{
            line-height: 1rem;
            overflow: hidden;
            white-space: normal;
            text-overflow: ellipsis;
            word-break:break-all;
            display:-webkit-box!important;
            -webkit-line-clamp: 1;
            -webkit-box-orient:vertical;
          }
          .state{
            margin-top: var(--space-width-half);
            padding-right: var(--space-width);
            overflow: hidden;
            white-space: normal;
            text-overflow: ellipsis;
            word-break:break-all;
            display:-webkit-box!important;
            -webkit-line-clamp: 1;
            -webkit-box-orient:vertical;
          }
        }
        &:hover{
          border-color: var(--color-primary);
        }
      }
    }
  }
}